<template>
	<view class="container">
		<image class="bg-img" src="../../../static/tab/back.png"></image>
		<view class="content"></view>
	</view>
	<view class="avatar">
		<!-- //默认显示的 -->
		<image v-if="!imgUrl" :src="'../../../static/tab/results.png'" class="headPhoto" @tap="openChooseImg"></image>
		<!-- //用户点击修改的 -->
		<image v-else :src="imgUrl" class="headPhoto" @tap="openChooseImg"></image>
	</view>
	<view class="card">
		<label for="">你的名字</label>
	</view>

	<view class="Curriculum">
		<uni-card>
			<button class="button" @tap="jumpCourse">课程表</button>
		</uni-card>
		<uni-card>
			<button class="button2" @tap="jumpDetail">详情</button>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: ""
			};
		},
		methods: {
			openChooseImg() {
				uni.chooseImage({
					count: 1, //最多可选择的张数
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
					success: res => {
						console.log(res, '头像res')
						this.imgUrl = res.tempFilePaths[0] //把选择的头像赋值给imgurl
						console.log(this.imgUrl, 'this.imgUrl')
					}
				});
			},
			jumpCourse() {
				uni.navigateTo({
					url: "/pages/Percenter/Course"
				})
			},
			jumpDetail(){
				uni.navigateTo({
					url:"/pages/Percenter/Detail"
				})
			}
		},
	};
</script>

<style lang="scss">
	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.btn2 {
		width: 140px;
		height: 35px;
		background-color: #ff5500;
		color: #ffffff;
		font-size: 12px;
		line-height: 35px;
		border-radius: 17px;
	}

	.avatar {
		height: 150px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center
	}

	.headPhoto {
		border-radius: 50%;
		width: 80px;
		height: 80px;
	}

	.timeBox {
		margin-top: 30rpx;
	}

	.card {
		height: 40px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 25px;
		margin-bottom: 30px;
	}

	.img1 {
		height: 15vw;
		width: 115rpx;
	}

	.Curriculum {
		opacity: 0.6;
	}
</style>
